﻿(function (window, undefine) {
    var main_map = null;
    var drawingManager = null;
    var image = 'images/YellowPin1LargeB.png';
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(41.948766, -87.691497),
            zoom: 6
        };

        main_map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        //Set 45 imagery
        main_map.setTilt(45);
        var layer = new google.maps.FusionTablesLayer({
            map: main_map,
            query: {
                select: 'address, station',
                from: '16iShD8x2WnvtXPxL9RVZkyaApXXKZyHwpDgqauzh',
                where: "station contains 'i'"
            }
        });
    }

    //Initialize map
    google.maps.event.addDomListener(window, 'load', initialize);

    $(document).ready(function () {
        //Clear graphic
        $('#clearGraphic').click(function () {
            drawingManager.clearOverlays();
        });
        //Get data
        var listPoint = [
            new google.maps.LatLng(15.116951, 108.802757),
            new google.maps.LatLng(15.134848, 108.828506),
            new google.maps.LatLng(15.120558, 108.778038)
        ];
        var markers = [];
        var iterator = 0;

        function getData() {
            for (var i = 0; i < listPoint.length; i++) {
                setTimeout(function () {
                    addMarker();
                }, i * 200);
            }
        }

        function addMarker() {
            markers.push(new google.maps.Marker({
                position: listPoint[iterator],
                map: map,
                draggable: false,
                icon: image,
                animation: google.maps.Animation.DROP
            }));
            iterator++;
        }

        $("#getData").click(function () {
            getData();
        });
    });

})(window);